<template>
    <el-row v-loading="loading">
        <el-col :span="24">
            <el-container style="height: 500px">
                <el-main>
                    <el-scrollbar class="custom-scrollbar" style="min-height: 460px;">
                        <xy-view-tree
                                ref="tree" :autoLoad="false"
                                @loadSuccess="treeLoadSuccess"
                                :checkOnClick="true"
                                :checkStrictly="true"
                                :expandOnClick="false">
                        </xy-view-tree>
                    </el-scrollbar>
                </el-main>
            </el-container>
        </el-col>

        <el-col :span="24">
            <div style="text-align: right">
                &emsp;&emsp;&emsp;&nbsp;&nbsp;
                <el-button type="primary" @click="onSubmit">保存</el-button>
                <!--<el-button @click="clearCheck">重置</el-button>-->
            </div>
        </el-col>
    </el-row>

</template>

<script>

    import xyViewTree from '../view_widget/ViewWidgetTree.vue';

    /**
     * 模块配置
     */
    export default {
        mounted() {
            this.loadData(null, {
                roles: this.setView,
                enabled: true,
                scene: this.viewWidget
            });
        },
        components: {
            xyViewTree
        },
        props: {
            version: undefined,
            viewWidget: undefined,
            setView: {
                type: String
            },
            roleViewId: {
                type: Number
            }
        },
        data() {
            return {
                scene: this.viewWidget,
                loading: true
            };
        },
        computed: {},
        methods: {
            /**
             * 保存
             */
            onSubmit: function () {
                let _this = this;
                let checkedKeys = this.$refs.tree.getCheckedKeys();
                let items = [];
                if (checkedKeys.length !== 0) {
                    checkedKeys.forEach(function (val, index) {
                        let item = {
                            viewId: val
                        };
                        items.push(item);
                    });
                }
                let param = {
                    scene: _this.scene,
                    items: items,
                    roleViewId: _this.roleViewId
                };
                _this.$ajax
                    .put("auth/role_view/set_widget_views", param)
                    .then(res => {
                        if (res.code !== "ok") {
                            _this.$message.error(res.msg);
                        } else {
                            _this.$emit('submitSuccess', res); //添加成功
                        }
                    });
            },
            /**
             * 清空所有选择
             */
            clearCheck: function () {

            },
            /**
             * 选中所有
             */
            checkAll: function () {

            },
            /**
             * 重新加载树
             */
            loadData(setView, filter) {
                let _this = this;
                // setView = setView || _this.setView;
                _this.$ajax.get('auth/role_view/get_view_id/' + this.roleViewId)
                    .then(res => {
                        if (res.code !== "ok") {
                            _this.$message.error(res.msg);
                        } else {
                            this.$refs.tree.loadData(filter, res.data);
                        }
                    });
            },
            /**
             * 树加载成功事件
             */
            treeLoadSuccess() {
                this.loading = false;
            }
        },
        watch: {
            version() {
                this.scene = this.viewWidget;
                this.loadData(this.roleViewId, {
                    roles: this.setView,
                    enabled: true,
                    scene: this.viewWidget
                });
            }
        },
        filters: {},
        beforeDestroy() {

        }
    }
</script>

<style scoped>

</style>
